<template>
  <el-dialog
      :model-value="visible"
      :title="isEdit ? '编辑居民信息' : '新增居民信息'"
      width="70%"
      @close="handleClose"
  >
    <el-form
        :model="formData"
        :rules="rules"
        ref="formRef"
        label-width="100px"
        label-position="right"
    >
      <!-- 基本信息部分 -->
      <el-divider content-position="left">基本信息</el-divider>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="居民编号" prop="residentId">
            <el-input v-model="formData.residentId" :disabled="isEdit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="gender">
            <el-select v-model="formData.gender" placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="出生日期" prop="dateOfBirth">
            <el-date-picker
                v-model="formData.dateOfBirth"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
                value-format="YYYY-MM-DD"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="formData.idCard"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机号码" prop="phoneNumber">
            <el-input v-model="formData.phoneNumber"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="民族" prop="ethnicity">
            <el-input v-model="formData.ethnicity"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="籍贯" prop="birthplace">
            <el-input v-model="formData.birthplace"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现居地" prop="currentAddress">
            <el-input v-model="formData.currentAddress"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 其他信息部分 -->
      <el-divider content-position="left">其他信息</el-divider>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="文化程度" prop="educationLevel">
            <el-select v-model="formData.educationLevel" placeholder="请选择文化程度">
              <el-option label="小学" value="小学"></el-option>
              <el-option label="初中" value="初中"></el-option>
              <el-option label="高中" value="高中"></el-option>
              <el-option label="大专" value="大专"></el-option>
              <el-option label="本科" value="本科"></el-option>
              <el-option label="硕士" value="硕士"></el-option>
              <el-option label="博士" value="博士"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="婚姻状况" prop="maritalStatus">
            <el-select v-model="formData.maritalStatus" placeholder="请选择婚姻状况">
              <el-option label="未婚" value="未婚"></el-option>
              <el-option label="已婚" value="已婚"></el-option>
              <el-option label="离异" value="离异"></el-option>
              <el-option label="丧偶" value="丧偶"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职业" prop="occupation">
            <el-input v-model="formData.occupation"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="工作单位" prop="workUnit">
            <el-input v-model="formData.workUnit"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {updateResident} from "../api/Residents.js";

export default {
  name: "ResidentsEdit",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    details: {
      type: Object,
      default: () => ({})
    },
    isEdit: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:visible', 'submit','submit-success'],
  data() {
    return {
      formData: {
        residentId: '',
        name: '',
        gender: '',
        dateOfBirth: '',
        idCard: '',
        phoneNumber: '',
        ethnicity: '',
        birthplace: '',
        currentAddress: '',
        educationLevel: '',
        maritalStatus: '',
        occupation: '',
        workUnit: ''
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证号格式不正确', trigger: 'blur' }
        ],
        phoneNumber: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ]
      }
    };
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.resetForm();
        if (this.isEdit && this.details) {
          this.formData = { ...this.details };
        }
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
    },
    async handleSubmit() {
      try {
        let {data} = await updateResident(this.formData);
        console.log(data);
        if (data.code === 200) {
          this.$message.success('修改成功');
          // 触发成功事件，通知父组件更新数据
          this.$emit('submit-success');
        }
        this.handleClose();
      } catch (error) {
        console.error('保存失败:', error);
        this.$message.error('保存失败');
      }
    },
    resetForm() {
      this.formData = {
        residentId: '',
        name: '',
        gender: '',
        dateOfBirth: '',
        idCard: '',
        phoneNumber: '',
        ethnicity: '',
        birthplace: '',
        currentAddress: '',
        educationLevel: '',
        maritalStatus: '',
        occupation: '',
        workUnit: ''
      };
      if (this.$refs.formRef) {
        this.$refs.formRef.clearValidate();
      }
    },
    loadData(){
      this.formData = this.details
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: center;
}
</style>